<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>Finalove-App-news</title>
		<link rel="stylesheet" href="../../resource/font/css/font-awesome.min.css">
		<link rel="stylesheet" href="../../resource/css/mint.css">
		<link rel="stylesheet" href="../../resource/css/style.css">
		<script src="../../resource/js/vue.js"></script>
		<script src="../../resource/js/mint.min.js"></script>
		<script src="../../resource/js/jquery.min.js"></script>
		<script src="../../resource/js/md5.js"></script>
		<style type="text/css">
			body{
				background-color: #f2f2f2;
			}
			.ct-box{
				top: 40px;
				width: 100%;
				height: calc(100% - 40px);
				position: relative;
			}
			.send-box {
				position: absolute;
				bottom: 0;
				width: 100%;
				height: 65px;
			}
			.height-box {
				height: calc(100% - 95px);
				overflow-y: auto;
				overflow-x: hidden;
				padding: 15px;
			}
			.history-box {
				overflow-x: hidden;
			}
			msg {
				display: block;
				width: 70%;
				min-height: 50px;
				margin-bottom: 10px;
			}
			msg img {
				width: 50px;
				height: 50px;
				border-radius: 5px;
			}
			msg.from img {
				float: right;
			}
			msg.from {
				margin-left: 30%;
			}
			msg.to img {
				float: left;
			}
			msg.to {
				margin-right: 30%;
			}
			msg ct {
				display: block;
				width: calc(100% - 65px);
				padding: 5px;
				border-radius: 5px;
				min-height: 40px;
			}
			msg.from ct {
				background-color: rgba(154, 204, 20, 0.7);
			}
			msg.to ct {
				background-color: #FFFFFF;
				margin-left: 55px;
			}
		</style>
	</head>
	<body>
		<div id="main">
			<mt-header fixed :title="title">
				<mt-button icon="back" slot="left" class="closeView"></mt-button>
			</mt-header>
			<div class="ct-box">
				<div class="height-box">
					<div class="history-box" v-html="chatHistory">
						
					</div>
				</div>
				<div class="send-box">
					<mt-field label="" v-model="sendMsg" type="textarea">
						<mt-button size="small" type="primary" @click='doSend'>send</mt-button>
					</mt-field>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var main = new Vue({
			el:"#main",
			data:{
				title:"",
				msgTo:{},
				msgFrom:{},
				sendMsg:"",
				chatHistory:"",
				ws:new WebSocket("ws://websocket.finalove.top/ws"),
			},
			mounted:function() {
				this.init();
			},
			methods:{
				init() {
					// 获取配置
					$.getJSON('../../resource/config.json',function(res){
						main.api_prefix = res.api_prefix;
						main.api_key = res.api_key;
						main.app_version = res.app_version;
						main.app_version_check_url = res.app_version_check_url;
					});
					// loading
					document.addEventListener('plusready',function () {
						// 沉浸header
						plus.navigator.setFullscreen(true);
						// header返回btn
						document.querySelector(".closeView").addEventListener('click',function(){
							plus.webview.currentWebview().close();
						});
						// backbutton事件修改
						plus.key.addEventListener('backbutton', function() {
							plus.webview.currentWebview().close();
							return false;
						}, false);
						// 获取参数
						main.msgTo = plus.webview.currentWebview().param;
						main.title = main.msgTo.name;
						main.msgFrom = {
							user_id:plus.storage.getItem("user_id"),
							user_name:plus.storage.getItem("user_name"),
							user_head:plus.storage.getItem("user_head"),
							nick_name:plus.storage.getItem("nick_name"),
							email:plus.storage.getItem("email")
						}
						// ws_api
						var setChannel = {
							appkey:"KH1H57717Y315eZ5",
							signature:main.mkSignature(),
							channel:"a37",
							target:"setChannel"
						}
						var ws = new WebSocket("ws://websocket.finalove.top/ws");
						ws.onopen = function(){
						    ws.send(JSON.stringify(setChannel));
						};
						ws.onmessage = function(e){
							var res = eval("(" + e.data + ")");
							if(res.code == 2){
								var funcName = res.fn;
								if(typeof(eval(funcName)) == "function"){
									eval(funcName+"("+JSON.stringify(res.fnParams)+");");
						        }else{
						            console.warn("function:" + funcName + "is not defined");
						        }
								return false;
							}
							alert(JSON.stringify(res));
						}
						setInterval(()=>{
							var heartbeat = {
								appkey:"KH1H57717Y315eZ5",
								signature:mkSignature(),
								channel:"a37",
								target:"heartbeat"
							}
							ws.send(JSON.stringify(heartbeat));
						},30000);
					});
				},
				doSend() {
					this.addToHsitoryBox();
					this.setScrollHeight();
				},
				addToHsitoryBox() {
					// this.chatHistory += this.sendMsg + "<br>";
					var html = "";
					html += '<msg class="from">';
					html += '<img src="' + this.msgFrom.user_head + '" />';
					html += '<ct>' + this.sendMsg + '</ct>'
					html += '</msg>';
					html += '<msg class="to">';
					html += '<img src="' + this.msgTo.head + '" />';
					html += '<ct>' + this.sendMsg + '</ct>'
					html += '</msg>';
					this.chatHistory += html;
					this.sendMsg = "";
				},
				setScrollHeight() {
					$('.height-box')[0].scrollTop = $('.history-box')[0].offsetHeight;
				},
				mkSignature() {
					var appkey = "KH1H57717Y315eZ5";
					var privateKey = "NmEzZTA2MzJiZWMzM2ZhMTQ3YjE1NTA4ZTk4M2U2YWE";
					var oDate = new Date();
					var Nowi = Math.floor(oDate.getTime() / 1000000) + Math.ceil(oDate.getTime() / 1000000);
					return hex_md5(appkey + privateKey + Nowi);
				}
			}
		})
	</script>
</html>
